
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>工作时间计算器</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .fade-in { animation: fadeIn 0.3s ease-in-out; }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    </style>
</head>
<body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen">
    <div class="container mx-auto px-4 py-8">
        <header class="text-center mb-8">
            <h1 class="text-3xl font-bold text-indigo-700 mb-2">工作时间计算器</h1>
            <p class="text-gray-600">精确计算您的工作时长和加班时间</p>
        </header>

        <main class="max-w-2xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <h2 class="text-xl font-semibold text-gray-800 mb-4">工作时间记录</h2>
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">上班时间</label>
                            <input type="time" id="start-time" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">下班时间</label>
                            <input type="time" id="end-time" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">午休时间(分钟)</label>
                            <input type="number" id="break-time" value="60" min="0" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
                        </div>
                        <button onclick="calculateHours()" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-md transition duration-200">
                            <i class="fas fa-calculator mr-2"></i>计算工作时长
                        </button>
                    </div>
                </div>

                <div>
                    <h2 class="text-xl font-semibold text-gray-800 mb-4">计算结果</h2>
                    <div id="result" class="bg-gray-50 p-4 rounded-lg space-y-2 fade-in hidden">
                        <div class="flex justify-between">
                            <span class="text-gray-600">总工作时长:</span>
                            <span id="total-hours" class="font-medium"></span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">标准工作时长:</span>
                            <span id="standard-hours" class="font-medium">8小时</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">加班时长:</span>
                            <span id="overtime-hours" class="font-medium text-red-600"></span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">工作时薪(元):</span>
                            <span id="hourly-rate" class="font-medium"></span>
                        </div>
                        <div class="flex justify-between font-bold border-t pt-2 mt-2">
                            <span class="text-gray-800">当日工资:</span>
                            <span id="daily-wage" class="text-indigo-700"></span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-8">
                <h2 class="text-xl font-semibold text-gray-800 mb-4">历史记录</h2>
                <div class="overflow-x-auto">
                    <table class="min-w-full bg-white border border-gray-200 rounded-lg">
                        <thead>
                            <tr class="bg-gray-100">
                                <th class="py-2 px-4 border-b">日期</th>
                                <th class="py-2 px-4 border-b">工作时长</th>
                                <th class="py-2 px-4 border-b">加班时长</th>
                                <th class="py-2 px-4 border-b">工资</th>
                            </tr>
                        </thead>
                        <tbody id="history-table">
                            <!-- 历史记录将通过JS动态生成 -->
                        </tbody>
                    </table>
                </div>
            </div>
        </main>
    </div>

    <script>
        // 从本地存储加载历史记录
        function loadHistory() {
            const history = JSON.parse(localStorage.getItem('workHistory')) || [];
            const tableBody = document.getElementById('history-table');
            tableBody.innerHTML = '';

            history.forEach(record => {
                const row = document.createElement('tr');
                row.className = 'hover:bg-gray-50';
                row.innerHTML = `
                    <td class="py-2 px-4 border-b">${record.date}</td>
                    <td class="py-2 px-4 border-b">${record.totalHours}</td>
                    <td class="py-2 px-4 border-b">${record.overtime}</td>
                    <td class="py-2 px-4 border-b">${record.wage}元</td>
                `;
                tableBody.appendChild(row);
            });
        }

        // 计算工作时长
        function calculateHours() {
            const startTime = document.getElementById('start-time').value;
            const endTime = document.getElementById('end-time').value;
            const breakMinutes = parseInt(document.getElementById('break-time').value) || 0;

            if (!startTime || !endTime) {
                alert('请填写上班和下班时间');
                return;
            }

            // 解析时间
            const [startHour, startMinute] = startTime.split(':').map(Number);
            const [endHour, endMinute] = endTime.split(':').map(Number);

            // 计算总分钟数
            let totalMinutes = (endHour * 60 + endMinute) - (startHour * 60 + startMinute) - breakMinutes;
            
            // 处理跨天情况
            if (totalMinutes < 0) totalMinutes += 24 * 60;

            // 计算小时和分钟
            const hours = Math.floor(totalMinutes / 60);
            const minutes = totalMinutes % 60;
            const totalHours = hours + (minutes / 60);

            // 计算加班时间(超过8小时部分)
            const standardHours = 8;
            const overtime = Math.max(0, totalHours - standardHours);

            // 计算工资(假设时薪10元，加班1.5倍)
            const hourlyRate = 10;
            const dailyWage = (standardHours * hourlyRate) + (overtime * hourlyRate * 1.5);

            // 显示结果
            document.getElementById('total-hours').textContent = `${hours}小时${minutes}分钟`;
            document.getElementById('overtime-hours').textContent = overtime > 0 ? 
                `${Math.floor(overtime)}小时${Math.round((overtime % 1) * 60)}分钟` : '无';
            document.getElementById('hourly-rate').textContent = hourlyRate;
            document.getElementById('daily-wage').textContent = `${dailyWage.toFixed(2)}元`;
            document.getElementById('result').classList.remove('hidden');

            // 保存记录
            saveRecord(totalHours, overtime, dailyWage);
        }

        // 保存记录到本地存储
        function saveRecord(totalHours, overtime, wage) {
            const today = new Date().toLocaleDateString();
            const record = {
                date: today,
                totalHours: `${Math.floor(totalHours)}小时${Math.round((totalHours % 1) * 60)}分钟`,
                overtime: overtime > 0 ? 
                    `${Math.floor(overtime)}小时${Math.round((overtime % 1) * 60)}分钟` : '无',
                wage: wage.toFixed(2)
            };

            const history = JSON.parse(localStorage.getItem('workHistory')) || [];
            history.unshift(record); // 添加到开头
            localStorage.setItem('workHistory', JSON.stringify(history));

            // 刷新历史记录
            loadHistory();
        }

        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', () => {
            loadHistory();
            
            // 设置默认时间为当前时间
            const now = new Date();
            const hours = now.getHours().toString().padStart(2, '0');
            const minutes = now.getMinutes().toString().padStart(2, '0');
            document.getElementById('end-time').value = `${hours}:${minutes}`;
        });
    </script>
</body>
</html>
